import './App.css';
import React from 'react';
import { Card, Tabs, Toast, NoticeBar } from 'antd-mobile';
import * as request from './request';
import Toolbar from "./Toolbar";
import { connect } from 'react-redux';
import Header from "./Header";
import ForeHeightJD from "./Components/ForeHeightJD";
import ForeHeightWK from "./Components/ForeHeightWK";
import ForeHeightTN from "./Components/ForeHeightTN";
import ico_bichi from './static/ico_bichi.svg';

const apiURL = "/api/services/app/Edu_Children/Get?id=";
const tabs = [
    { title: '经典法' },
    { title: '泰纳法' },
    { title: '威克法' },
    { title: '粗略法' },
];
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            childData: [],
        }
    }
    componentDidMount() {
        this.fetchData();
    }
    componentWillUnmount = () => {
        this.setState = () => {
            return;
        };
    }
    fetchData = () => {
        const { currentChild } = this.props;
        if (currentChild) {
            request.get(apiURL + currentChild.id)
                .then((data) => {
                    this.setState({ childData: data.result });
                })
        }
        else {
            Toast.info('请选择宝宝');
        }
    }
    goto = (item) => {
        if (item.childid === 0) {

        }
        else {

            this.props.history.push(item.url);
        }
    }
    selectBaby = (babyData) => {
        this.setState({ babyData })
    }
    render() {
        return (
            <div>
                <Header state={this.props} selectBaby={this.selectBaby} />
                <NoticeBar marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }}>
                    预测男孩身高的误差不超过5cm，预测女孩身高的误差在5至7.5cm之间
    </NoticeBar>
                <Card full>
                    <Card.Header
                        title="身高预测"
                        thumb={ico_bichi}
                        extra={<span>请选择预测方法</span>}
                    />
                    <Card.Body>
                        <Tabs tabs={tabs}
                            initialPage={0} >
                            <div>
                                <NoticeBar mode="closable" icon={null}>经典法: 利用父母身高进行预测</NoticeBar>
                                <ForeHeightJD state={this.props} /></div>
                            <div>
                                <NoticeBar mode="closable" icon={null}>泰纳法：根据3岁时身高预测</NoticeBar>
                                <ForeHeightTN state={this.props} />
                            </div>
                            <div>
                                <NoticeBar mode="closable" icon={null}>威克法：根据2岁时身高和父母身高预测</NoticeBar>
                                <ForeHeightWK state={this.props} />
                            </div>
                            <div>
                                <ForeHeightJD state={this.props} method='RangeHeight' />
                            </div>
                        </Tabs>
                    </Card.Body>
                    <Card.Footer content="本算法仅供参考" extra={<div></div>} />
                </Card>

                <Toolbar history={this.props.history} selectedTab='ChildDtl' />
            </div>
        )
    };
}
export default connect(
    state => ({ currentUser: state.setCurrentUser, currentChild: state.setCurrentChild })
)(App)
